<template>
	<div class="cusMain">
		<div class="enroll">
			<img src="../assets/img/linelog.png" class="enr-img"/>
			<div class="enr-p">
				<p class="must" style="border-bottom: none;">
					<label for="userName"><img src="../assets/img/yhu.png"/></label>
					<input type="text" class="logusername" id="userName" v-model="name" @blur="lname" placeholder="请输入会员名"/>
					<code v-text="code1"></code>
				</p>
				<code></code>
				<p class="must">
					<label for="pass"><img src="../assets/img/mima.png"/></label>
					<input type="password" id="pass" v-model="pass" placeholder="请输入密码"/>
					<code v-text="code2"></code>
				</p>
			</div>
			<p class="logins">
				<input type="checkbox" id="check"/>
				<label for="check">自动登录</label>
				<a href="#">忘记密码？</a>
			</p>
			<button class="sub" id="sub" @click="login">登录</button>
			<button class="regi" id="regi" @click = "zhuce">注册</button>
		</div>
		<transition-group enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
			<div class="black" v-show="hideBlock" @click="block" :key="1"></div>
			<div class="zhut" v-show="hideBlock" :key="2">
				<h3>您的身份是</h3>
				<router-link to="/myreg" class="qybut">我是企业用户</router-link>
				<router-link to="/myreg" class="grbut">我是个人用户</router-link>
			</div>
		</transition-group>
		
	</div>
</template>

<script>
	export default{
		data: function(){
			return{
				hideBlock:false,
				name:"",
				pass:"",
				code1:"",
				code2:"",
				yes:""
			}
		},
		methods:{
			zhuce(){
				this.hideBlock = true
			},
			block(){
				this.hideBlock = false
			},
			login(){
				if(this.name == ""){
					this.code1 = "用户名长度在4-20个字符之间！"
				}else{
					let uName = sessionStorage.uName;
					if(this.name == uName){
						this.yes = true;
						this.code1 = ""
					}else{
						this.yes = false
					}
				};
				if(this.pass == ""){
					this.code2 = "您输入的用户不存在，请重新输入！"
				}else{
					let uPass = sessionStorage.uPass;
					if(this.pass == uPass && this.yes){
						sessionStorage.logName = this.name;
						sessionStorage.loginPass = this.pass;
						this.$router.push({
							path:"/mycenter"
						})
					};
					if(this.pass != uPass && this.yes){
						this.code2 = "密码和账户不匹配，请重新输入！"
					};
					if(this.pass == uPass && !this.yes){
						this.code2 = "密码和账户不匹配，请重新输入！"
					};
					if(this.pass !=uPass && !this.yes){
						this.code1 = "用户名长度在4-20个字符之间";
						this.code2 = "您输入的用户不存在，请重新输入！";
					}
					
				};
			},
			lname(){
				if(this.name != ""){
					let res = /^[a-zA-Z\d_-]{4,20}$/;
					if(!res.test(this.name)){
						this.code1 = "用户格式错误！";
					}else{
						this.code1 = ""
					}
				}
			}
		}
	}
</script>

<style>
	@import url("../assets/css/animate.css");
.black {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    width: 100%;
    height: 100%;
}
.zhut {
    width: 80%;
    margin: 0 auto;
    margin-top: 40%;
    padding: 30px 0;
    text-align: center;
    background: #FFF;
    font-size: 1em;
    position: absolute;
    left: 38px;
    top: 14px;
    z-index: 888;
}
.zhut h3 {
    color: #ffb400;
    margin: 20px auto 30px auto;
    font-size: 14px;
}
.zhut a {
    width: 90%;
    text-decoration: none;
    display: block;
    margin: 10px auto;
    height: 50px;
    line-height: 50px;
    background-color: #f53f3e;
    text-align: center;
    border: none;
    border-radius: 3px;
    color: #FFF;
}
.zhut a.qybut {
    background-color: #2184ff;
}
code {
    position: absolute;
    left: 50px;
    bottom: 2px;
    line-height: 16px;
    font-size: 12px;
    color: red;
}
</style>